<template>
    <div class="xunjingwendao order-list">
        <Navbar :activeMenu="currentPath" />
        <div class="main container">
            <!-- 顶部导航 -->
            <div class="nav-bar">


                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane v-for="(item, index) in navItems" :key="index" :label="item.name" :name="item.name"
                        @click="changeTab(index, item.status)"></el-tab-pane>

                </el-tabs>
            </div>

            <!-- 订单列表 -->
            <div class="order-scroll" v-if="orderList.length">

                <div class="order-item" v-for="(order, index) in orderList" :key="index">

                    <div class="order-header">
                        <span class="order-number">订单号: {{ order.orderNo }}</span>

                        <!-- <span :class="['order-status', order.statusClass]">{{ order.status }}</span> -->
                        <span v-if="order.status == 0" class="status-pending">待付款</span>

                        <span v-if="order.status == 3" class="status-completed">已完成</span>
                        <span v-if="order.status == 4" class="yiguanbi">已关闭</span>
                    </div>
                    <div class="order-content" v-for="(item, index) in order.listOrderItem">
                        <img :src="item.picUrl" mode="aspectFill" class="product-image" />
                        <div class="order-details">
                            <span class="product-name">{{ item.spuName }}</span>
                            <span class="order-date">下单时间: {{ item.createTime }}</span>
                        </div>
                    </div>
                    <div class="order-footer">
                        <span class="order-amount">实际支付: ¥{{ order.paymentPrice }}</span>
                        <div class="action-button" v-if="order.status == 0">
                            <el-button type="primary" size="mini" :plain="true"
                                @click="pay(order.id, order.paymentPrice, order.userMessage)">立即支付</el-button>
                            <el-button type="info" size="mini" :plain="true" @click="qxdd(order.id)">取消订单</el-button>
                        </div>

                        <div class="action-button" v-if="order.status == 5">
                            <el-button type="error" size="mini" :plain="true"
                                @click="delOrder(order.id)">删除订单</el-button>
                        </div>

                    </div>
                </div>
            </div>
            <div v-else>
                <el-empty description="暂无订单">
                </el-empty>
            </div>
        </div>

    </div>
</template>

<script>
import { orderinfoCourseTake, orderinfoCourseDel, orderinfoListCourse, orderinfoCourseDetails } from '@/api/index'
export default {
    computed: {
        currentPath() {
            return '/lesson'; // 获取当前路由路径
        },
    },
    data() {
        return {
            navItems: [
                { name: '全部', status: '' },

                { name: '已完成', status: 3 },
                { name: '已关闭', status: 5 },
            ],
            activeName: '全部',
            currentTab: 0,
            orderList: [],
            status: ""

        }
    },

    methods: {
        handleClick(tab, event) {

            this.status = tab.index;

            this.orderinfoListFn(tab.index);
        },

        pay(id, price, userMessage) {

            this.$router.push({
                path: '/payMoney',
                query: {
                    id: id,

                    userMessage: userMessage,
                    goodsPrice: price,
                    type: 'order'
                }
            })
        },

        qxdd(id) {
            orderinfoCourseTake(id).then((res) => {
                if (res.code == 200) {
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })

                    this.orderinfoListFn(this.status)

                } else {
                    this.$message.warning({
                        message: res.msg,
                        type: 'success'
                    })
                }
            })
        },
        delOrder(id) {
            orderinfoCourseDel(id).then((res) => {
                if (res.code == 200) {
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                    this.orderinfoListFn(this.status)

                } else {
                    this.$message.warning({
                        message: res.msg,
                        type: 'success'
                    })
                }
            })
        },
        orderinfoListFn(status) {
            let data = {
                pageNum: 1, pageSize: 1000
            }
            if (status != "") {
                data['status'] = status;
            }
            orderinfoListCourse(data).then((res) => {
                console.log(res, 'listorder')
                if (res.code == 200) {
                    this.orderList = res.data.records;

                } else {
                    this.$message.warning({
                        message: res.msg,
                        type: 'success'
                    })
                }
            })
        },

    },

    mounted() {
        this.orderinfoListFn("")
    }
}
</script>

<style lang="scss" scoped>
.order-list {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f5f5;


    .order-scroll {
        width: 95%;
        padding: 20px;

        .empty-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #999;

            .empty-icon {
                width: 200px;
                height: 200px;
                margin-bottom: 20px;
            }
        }

        .order-item {

            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #f5f5f5;
            background: #fff;

            .order-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;


                .status-pending {

                    color: #ffa500;
                }

                .status-processing {

                    color: #1890ff;
                }

                .status-completed {

                    color: #52c41a;
                }

                .yiguanbi {
                    color: red;
                }


            }

            .order-number {
                font-size: 14px;
                color: #666;
            }


            .order-content {
                display: flex;
                margin-bottom: 20px;

                .order-details {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    .product-name {
                        font-size: 14px;
                        font-weight: bold;
                        color: #333;
                    }

                    .order-date {
                        font-size: 13px;
                        color: #999;
                    }

                }

                .product-image {
                    width: 129px;
                    height: 100px;
                    border-radius: 10px;
                    margin-right: 20px;
                }

            }

            .order-footer {
                display: flex;
                align-items: center;
                justify-content: end;

                .action-button {

                    display: flex;

                    .el-button {
                        margin-left: 10px;
                    }


                }

                .order-amount {
                    font-size: 16px;
                    font-weight: bold;
                    color: #ff6b6b;
                }

            }

        }
    }
}
</style>